<!-- 
 * 角色管理
 * @author: 
 * @since: 2022-04-07
 * index.vue
-->
<template>
    <div class="role-management-container h100">
        <div class="listPage">
            <div class="search">
                <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter"></Filters>
            </div>
            <div class="table">
                <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" :btnData="state.btnData" @getCurrentChange="getCurrentChange" @comEvent="tableEventCom" @colSelect="colSelect" @refresh="getAllRole()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="250">
                    <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
                </TableCom>
            </div>
        </div>
        <roleDrawer :isShowDrawer="isShowRoleDrawer" @close="roleDrawerClose" :roleId="state.roleId" @refresh="getAllRole()" :data="state.roleRowData"></roleDrawer>
        <roleMemberSetting v-if="isShowRoleMember" :isShowDrawer="isShowRoleMember" @close="roleMemberClose" :data="state.roleRowData" @refresh="getAllRole()"></roleMemberSetting>
    </div>
</template>

<script setup>
import { reactive, onMounted, ref, inject, onActivated } from "vue";
import {
    getAllRoleList,
    delRole,
    batchDelRole,
    batchStartRole,
    batchStopRole,
} from "@/api/interface/role.js";
import { successHandle, colFilters } from "@/utils/common.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const router = useRouter();
const store = useStore();

const state = reactive({
    formModel: {
        //搜索列表的参数
        rolename: "", //角色名称
        valid: "", //状态
    },
    formLabel: [
        {
            label: "角色名称",
            model: "rolename",
            type: "text",
            width: "160",
            placeholder: "请输入角色名称",
        },
        {
            label: "状态",
            model: "valid",
            type: "select",
            width: "160",
            option: [
                {
                    key: "全部",
                    value: "",
                },
                {
                    key: "启用",
                    value: true,
                },
                {
                    key: "禁用",
                    value: false,
                },
            ],
        },
    ],
    tableData: [],
    tableHeader: [
        {
            label: "角色名称",
            prop: "rolename",
        },
        {
            label: "角色描述",
            prop: "rolenode",
        },
        {
            label: "状态",
            prop: "valid",
            status: true,
        },
    ],
    btnData: [
        {
            name: "角色成员设置",
            icon: "shezhi",
            color: "#00A2FF",
            change: "roleMemberSetting",
        },
        {
            name: "编辑",
            icon: "bianji",
            color: "#25D390",
            change: "edit",
        },
        {
            name: "删除",
            icon: "shanchu",
            color: "#F74B33",
            change: "del",
        },
        {
            name: "是否启用",
            isStart: true,
            prop: "valid",
            change: "enable",
        },
    ],
    roleId: null, //角色id
    pagination: {
        //分页
        currentPage: 1,
        size: 10,
        total: 0,
    },
    roleRowData: {}, //table每一行数据
    selectTableId: [], //选择表格数据
});

//角色管理模块功能按钮
const btnList = reactive([
    {
        name: "新增角色",
        icon: "",
        bgColor: "#25D390",
    },
    {
        name: "批量启用",
        icon: "qiyong",
        bgColor: "#00A2FF",
    },
    {
        name: "批量禁用",
        icon: "forbid",
        bgColor: "#FFB018",
    },
    {
        name: "批量删除",
        icon: "shanchu",
        bgColor: "#F74B33",
    },
]);

//区域加载
const loading = ref(true);
//右侧抽屉
const isShowRoleDrawer = ref(false);
//角色成员设置
const isShowRoleMember = ref(false);
onMounted(() => {
    getAllRole();
    state.formModel.valid = state.formLabel[1].option[0].value;
});

//获取所有的角色列表
const getAllRole = () => {
    loading.value = true;
    const params = {
        ipi: state.pagination.currentPage,
        ips: state.pagination.size,
        rolename: state.formModel.rolename,
        valid: state.formModel.valid,
    };
    getAllRoleList(params).then((res) => {
        const { status, data } = res;
        if (status === 200) {
            loading.value = false;
            state.tableData = data.result;
            state.pagination.currentPage = data.pageNum;
            state.pagination.size = data.pageSize;
            state.pagination.total = data.total;
            state.tableData.forEach(item => {
                if (item.valid === null) {
                    item.valid = false
                }
            })

        }
    });
};
//关闭角色抽屉
const roleDrawerClose = () => {
    isShowRoleDrawer.value = false;
    state.roleId = null;
    state.roleRowData = {};
};
//删除角色
const deleteRole = (id) => {
    delRole(id).then((res) => {
        successHandle(res);
        getAllRole();
    });
};
//批量启用
const batchStart = () => {
    batchStartRole(state.selectTableId).then((res) => {
        successHandle(res);
        getAllRole();
    });
};
//批量禁用
const batchStop = () => {
    batchStopRole(state.selectTableId).then((res) => {
        successHandle(res);
        getAllRole();
    });
};
//关闭角色成员设置
const roleMemberClose = () => {
    isShowRoleMember.value = false;
};

//点击角色操作按钮
const clickHandle = (index) => {
    switch (index) {
        case 0: //新增角色
            state.roleId = null;
            isShowRoleDrawer.value = true;
            break;
        case 1: //批量启用
            if (state.selectTableId.length > 0) {
                ElMessageBox.confirm(`您确定要批量启用？`, "操作提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    dangerouslyUseHTMLString: true,
                    type: "warning",
                })
                    .then(async () => {
                        batchStart();
                    })
                    .catch(() => { });
            } else {
                ElMessage({
                    message: "至少选择一项",
                    type: "warning",
                });
            }

            break;
        case 2: //批量禁用
            if (state.selectTableId.length > 0) {
                ElMessageBox.confirm(`您确定要批量禁用？`, "操作提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    dangerouslyUseHTMLString: true,
                    type: "warning",
                })
                    .then(async () => {
                        batchStop();
                    })
                    .catch(() => { });
            } else {
                ElMessage({
                    message: "至少选择一项",
                    type: "warning",
                });
            }
            break;
        case 3: //批量删除
            if (state.selectTableId.length > 0) {
                ElMessageBox.confirm(`您确定要批量删除？`, "操作提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    dangerouslyUseHTMLString: true,
                    type: "warning",
                })
                    .then(async () => {
                        batchDelRole(state.selectTableId).then((res) => {
                            successHandle(res);
                            getAllRole();
                        });
                    })
                    .catch(() => { });
            } else {
                ElMessage({
                    message: "至少选择一项",
                    type: "warning",
                });
            }
            break;
    }
};

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
    if (type === "filter") {
        const currentData = colFilters(data, e, currentItem, state.tableHeader);
        state.tableHeader = currentData;
    } else {
        //全选/全取消
        state.tableHeader = data;
    }
};

//表格中的操作
const tableEventCom = (type, data) => {
    switch (type) {
        case "edit":
            isShowRoleDrawer.value = true;
            state.roleId = data.id;
            state.roleRowData = data;
            break;
        case "del":
            ElMessageBox.confirm(`您确定要删除数据？`, "操作提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                dangerouslyUseHTMLString: true,
                type: "warning",
            })
                .then(async () => {
                    await deleteRole(data.id);
                })
                .catch(() => { });
            break;
        case "enable":
            state.tableData.forEach((item) => {
                if (item.id === data.id) {
                    item.valid = !item.valid;
                }
            });
            ElMessageBox.confirm(`您确定要${!data.valid ? "启用" : "禁用"}？`, "操作提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                dangerouslyUseHTMLString: true,
                type: "warning",
            })
                .then(async () => {
                    let arr = [];
                    arr.push(data.id);
                    state.selectTableId = arr;
                    !data.valid ? batchStart() : batchStop();
                })
                .catch(() => { });
            break;
        case "roleMemberSetting":
            isShowRoleMember.value = true;
            state.roleRowData = data;
            break;
    }
};

//搜索
const filter = () => {
    getAllRole();
};
//重置
const reset = () => {
    for (let key in state.formModel) {
        state.formModel[key] = "";
    }
    getAllRole();
};

//点击当前页
const getCurrentChange = (val) => {
    state.pagination.currentPage = val;
    getAllRole();
};

//点击条数
const getSizeChange = (val) => {
    state.pagination.size = val;
    getAllRole();
};

//选择表格数据
const getSelectChange = (row) => {
    state.selectTableId = row.map((item) => item.id);
};
</script>

<style lang="scss" scoped>
.role-management-container {
    .title {
        font-weight: 700;
        margin-bottom: 20px;
    }

    .main-left {
        width: 50%;
        background-color: $base-title-color;
        margin-right: 1%;
    }

    .main-right {
        width: 50%;
        background-color: $base-title-color;

        .roleLimitsConfig {
            .tree {
                margin: 10px 0;
            }
        }
    }
}
</style>
